<template>
  <div class="h_full w_full pagewarpper hasfooter">
    <div class="pagewapperheader bg_fff flexbetween">
      <div class="c_text2 fw-6 f-14 flexcenter">
        <img
          src="@/assets/images/arrow-circle-left.png"
          class="lefticon commhover"
          alt=""
          @click="goBack"
        />
        新建批量拉群任务
      </div>
    </div>
    <div class="pagewarpperbody m-0">
      <div class="mytips_error mytips_warning mb-12">
        <i class="el-icon-warning iconinfo f-16 mr-10"></i>
        【批量拉群】核心是满足“把多个人批量拉进一个群”的需求，如需“把一个人批量拉进多个群”请使用<span
          class="c_primary commhover"
          @click="goPage('MulitInvite')"
          >【批量群邀请】</span
        >
      </div>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        size="small"
        label-width="130px"
        label-position="left"
        class="addform p-12"
      >
        <div class="addcard bg_fff mb-12 br_4">
          <div class="cardheader">基本设置</div>
          <div class="cardbody p-20">
            <div class="carditem">
              <el-form-item label="任务标题：" prop="name">
                <el-input
                  v-model="form.name"
                  maxlength="15"
                  show-word-limit
                  style="max-width: 600px"
                ></el-input>
              </el-form-item>
              <el-form-item v-if="!isSingle" label="下发企微号：" prop="region">
                <el-select
                  v-model="form.region"
                  placeholder="请选择"
                  style="width: 270px"
                >
                  <el-option
                    v-for="(item, index) in companyList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-button class="ml-8" @click="handleOpenEwechat"
                  ><i class="el-icon-plus fw-6"></i> 选择企微号</el-button
                >
              </el-form-item>
            </div>
          </div>
        </div>

        <div class="addcard bg_fff mb-12 br_4">
          <div class="cardheader">被邀请客户</div>
          <div class="cardbody p-20">
            <div class="carditem">
              <el-form-item label="被邀请客户：" prop="type">
                <el-radio-group v-model="form.type">
                  <el-radio :label="1" :disabled="!isSingle">
                    <el-tooltip
                      v-if="!isSingle"
                      class="item"
                      effect="dark"
                      content="如需选择具体客户，请至单号模式下该功能点处创建"
                      placement="top"
                    >
                      <span>选择具体客户</span>
                    </el-tooltip>
                    <span v-else>选择具体客户</span>
                  </el-radio>
                  <el-radio :label="2">
                    <span class="c_text">按条件设置发送</span>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.type == 1" label="" prop="">
                <div class="bg_f7f7f7 p-16 flex flexwrap aligncenter">
                  <el-button @click="handleClient" class="mr-10"
                    >选择客户</el-button
                  >
                  <div
                    class="flex flexwrap aligncenter line_h_22"
                    style="max-width: 588px"
                  >
                    <div class="mr-4 userimg">
                      <img
                        src="//wework.qpic.cn/wwpic3az/653052_xhlEXu_pS7KOWcC_1709743954/0"
                        alt=""
                        class="userimg"
                      />
                    </div>
                    <span class="plr-6 c_primary"> 5 </span>个客户
                  </div>
                </div>
              </el-form-item>
              <el-form-item v-if="form.type == 2" label="" prop="kh_type">
                <div class="formcard">
                  <div class="fc_header flex aligncenter plr-16">
                    <el-radio-group v-model="form.kh_type">
                      <el-radio :label="1">
                        <span class="c_text">所有客户</span>
                      </el-radio>
                      <el-radio :label="2">
                        <span class="c_text">筛选客户</span>
                      </el-radio>
                    </el-radio-group>
                  </div>
                  <div class="fc_body p-16">
                    <div v-if="form.kh_type == 1" class="c_text4">
                      <i class="el-icon-warning-outline"></i>
                      选中企微号的所有客户
                    </div>
                    <div v-if="form.kh_type == 2">
                      <div v-for="(item, index) in conditionList" :key="index">
                        <el-button
                          v-if="index !== 0"
                          type="primary"
                          class="mtb-16"
                          >或 <i class="el-icon-sort"></i
                        ></el-button>
                        <div class="cardheader flexbetween c_border line_h_22">
                          <span>条件组{{ item.id }}</span>
                          <div class="">
                            <svg-icon
                              v-if="index == 0 && conditionList.length < 3"
                              icon-class="iplus"
                              class-name="commhover c_primary f-22"
                              @click="handlePlus"
                            />
                            <svg-icon
                              v-if="conditionList.length > 1"
                              icon-class="iminus"
                              class-name="commhover c_primary f-22 ml-12"
                              @click="handleMinus(index)"
                            />
                          </div>
                        </div>
                        <div class="bg_f9 p-16">
                          <div style="width: 510px">
                            <conditions-form labelposition="left" />
                          </div>
                          <div class="exclude mt-20">
                            <el-checkbox v-model="form.checked">
                              <span class="c_text3"
                                >排除符合以下条件的客户</span
                              >
                            </el-checkbox>
                          </div>
                          <div v-if="form.checked" style="width: 510px">
                            <conditions-form labelposition="left" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="根据群聊排除：" prop="status">
                <div class="flex aligncenter">
                  <el-switch
                    v-model="form.status"
                    inactive-color="#BFBFBF"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                  <span class="c_text3 pl-10"
                    >已在选中客户群中的客户不邀请</span
                  >
                </div>
              </el-form-item>

              <el-form-item label="流失和拉黑好友：" prop="black_type">
                <el-radio-group v-model="form.black_type">
                  <el-radio :label="1">
                    <span class="c_text">
                      不发送
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="过滤单向好友中的流失和拉黑好友，未验证好友不过滤"
                        placement="top"
                      >
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </span>
                  </el-radio>
                  <el-radio :label="2">
                    <span class="c_text">发送</span>
                  </el-radio>
                </el-radio-group>
                <span class="c_primary pl-30 commhover" @click="handleShow"
                  >什么是流失和拉黑好友？</span
                >
              </el-form-item>
            </div>
          </div>
        </div>

        <div class="addcard bg_fff mb-12 br_4">
          <div class="cardheader">目标群聊</div>
          <div class="cardbody p-20">
            <div
              class="mytips_error mytips_primary line_h_22"
              style="padding: 3px 10px"
            >
              <i class="el-icon-warning iconinfo f-16 mr-10"></i>
              群聊人数超过40人后，需要发送群邀请链接，客户确认后才能进群；已在群中的客户不会重复邀请；
            </div>
            <div class="carditem">
              <el-form-item label="选择现有群：" prop="grouptype">
                <el-radio-group v-model="form.grouptype">
                  <el-radio :label="1" :disabled="!isSingle">
                    <el-tooltip
                      v-if="!isSingle"
                      class="item"
                      effect="dark"
                      content="如需选择具体客户，请至单号模式下该功能点处创建"
                      placement="top"
                    >
                      <span>选择具体客户群</span>
                    </el-tooltip>
                    <span v-else>选择具体客户群</span>
                  </el-radio>
                  <el-radio :label="2">
                    <span class="c_text">按条件选择客户群</span>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.grouptype == 1" label="" prop="">
                <div class="bg_f7f7f7 p-16 flex flexwrap aligncenter">
                  <el-button @click="handleClientGroup" class="mr-10"
                    >选择客户群</el-button
                  >
                  <div
                    class="flex flexwrap aligncenter line_h_22"
                    style="max-width: 588px"
                  >
                    <div class="mr-4 userimg">
                      <img
                        src="//wework.qpic.cn/wwpic3az/653052_xhlEXu_pS7KOWcC_1709743954/0"
                        alt=""
                        class="userimg"
                      />
                    </div>
                    <span class="plr-6 c_primary"> 5 </span>个客户
                  </div>
                </div>
              </el-form-item>
              <el-form-item v-if="form.grouptype == 2" label="" prop="kh_type">
                <div class="formcard">
                  <div class="fc_header flex aligncenter plr-16">
                    <el-radio-group v-model="form.kh_type">
                      <el-radio :label="1">
                        <span class="c_text">所有客户群</span>
                      </el-radio>
                      <el-radio :label="2">
                        <span class="c_text">筛选客户群</span>
                      </el-radio>
                    </el-radio-group>
                  </div>
                  <div class="fc_body p-16">
                    <div v-if="form.kh_type == 1" class="c_text4">
                      <i class="el-icon-warning-outline"></i>
                      选中企微号的所有客户
                    </div>
                    <div v-if="form.kh_type == 2">
                      <div style="width: 510px">
                        <group-form2 labelposition="left" />
                      </div>
                      <div class="exclude mt-20">
                        <el-checkbox v-model="form.checked">
                          <span class="c_text">排除符合以下条件的客户群</span>
                        </el-checkbox>
                      </div>
                      <div v-if="form.checked" style="width: 510px">
                        <group-form2 labelposition="left" />
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="自动创建群:" prop="isauto" class="mb-10">
                <div class="flex aligncenter">
                  <el-switch
                    v-model="form.isauto"
                    inactive-color="#BFBFBF"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                  <span class="c_text3 pl-10 f-12">开启后，群不够自动新建</span>
                </div>
              </el-form-item>
              <el-form-item v-if="form.isauto" label="">
                <div class="bg_f7f7f7 p-16">
                  <el-form-item
                    label="群名称："
                    prop="status"
                    label-width="70px"
                    class="mb-0"
                  >
                    <div class="c_text">
                      <el-input
                        v-model="form.groupname"
                        clearable
                        placeholder="请输入"
                        maxlength="15"
                        show-word-limit
                        style="width: 300px"
                      ></el-input>
                      <span class="pl-20 pr-20">群自动编号，从</span>
                      <el-input
                        v-model="form.no"
                        clearable
                        placeholder=""
                        type="number"
                        style="width: 90px"
                        @blur="handleBlurNumber('no', 999)"
                      ></el-input>
                      <span class="pl-20"> 开始</span>
                    </div>
                  </el-form-item>
                  <div class="c_text3 mt-2 mb-12 f-12">
                    举例：群名称“团购群”，编号从3开始。则新建群的名称为“团购群3”“团购群4”“团购群5”……
                  </div>
                  <el-form-item label="新建群固定成员：">
                    <div>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="不支持选择固定成员，如需设置客户为固定成员，请至单号配置模式下创建"
                        placement="top-start"
                      >
                        <el-button
                          type="primary"
                          plain
                          disabled
                          icon="el-icon-plus"
                          >添加客户</el-button
                        >
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="不支持选择固定成员，如需设置客户为固定成员，请至单号配置模式下创建"
                        placement="top-start"
                      >
                        <el-button
                          type="primary"
                          plain
                          disabled
                          icon="el-icon-plus"
                          >添加企业成员</el-button
                        >
                      </el-tooltip>
                    </div>
                  </el-form-item>
                </div>
              </el-form-item>

              <el-form-item label="目标群成员数：" prop="number">
                <el-input
                  v-model="form.number"
                  clearable
                  placeholder=""
                  type="number"
                  style="width: 90px"
                  class="mr-10"
                  @blur="handleBlurNumber('no', 50)"
                ></el-input>
                <!-- <el-input v-model="form.num" type="number" :min="0" style="width:90px" class="mr-10" /> -->
                <span class="c_text"> 人 </span>
              </el-form-item>

              <el-form-item label="" prop="status">
                <template slot="label">
                  <span>
                    预计入群率
                    <el-tooltip
                      class="item"
                      effect="dark"
                      placement="top-start"
                    >
                      <div slot="content">
                        每个群邀请入群的人数=（群目标人数-该群当前人数）/
                        预计入群率；<br />
                        举例：某群当前有100人，设置的群目标人数为500人，预计入群率50%，该群会邀请（500-100）/50%=800人入群；<br />
                        注意：预计入群率偏高可能会导致群人数偏少，预计入群率偏低可能会导致部分人无法入群（群满500人后无法进入），请谨慎设置。<br />
                      </div>
                      <svg-icon
                        icon-class="iquestion"
                        class-name="c_888999 f-15"
                      />
                    </el-tooltip>
                    ：
                  </span>
                </template>
                <el-input
                  v-model="form.num"
                  type="number"
                  style="width: 90px"
                  class="mr-10"
                />
                <span class="c_text"> % </span>
              </el-form-item>
            </div>
          </div>
        </div>

        <div class="addcard bg_fff mb-12 br_4">
          <div class="cardheader">其它</div>
          <div class="cardbody p-20">
            <div class="carditem">
              <el-form-item label="入群前引导语：" prop="status">
                <div class="flex aligncenter">
                  <el-switch
                    v-model="form.status"
                    inactive-color="#BFBFBF"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                  <span class="c_text3 pl-10"
                    >客户群人数少于40人直接拉群；40人后若开启引导语，会先发送引导语，再发送邀请链接</span
                  >
                </div>
              </el-form-item>
              <el-form-item v-if="form.status == 1" label="">
                <MaterialContent ref="material" :maxlength="6" />
              </el-form-item>

              <el-form-item label="发送时间：" prop="jk_type">
                <div class="flex aligncenter">
                  <el-radio-group v-model="form.jk_type">
                    <el-radio :label="1">
                      <span class="c_text"> 立即发送 </span>
                    </el-radio>
                    <el-radio :label="2">
                      <span class="c_text">单次定时</span>
                    </el-radio>
                  </el-radio-group>
                  <div
                    class="mytips_error mytips_primary line_h_22 ml-30"
                    style="padding: 3px 10px"
                  >
                    <i class="el-icon-warning iconinfo f-16 mr-10"></i>
                    按条件发送的定时任务，将在实际开始发送前1小时更新发送对象
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="">
                <div class="bg_f7f7f7 addcard p-16 pl-36">
                  <el-form-item label="发送时间：" prop="time" class="mb-0">
                    <el-date-picker
                      v-model="form.time"
                      type="datetime"
                      placeholder="选择日期时间"
                    >
                    </el-date-picker>
                  </el-form-item>
                </div>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="form-footer bg_fff plr-16">
      <el-button size="small" @click="goBack">取消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit"
        >完成创建</el-button
      >
    </div>
    <!-- 选择企微号 -->
    <SelectWechat
      v-if="showEwechat"
      :visableIf.sync="showEwechat"
      width="670px"
      :showRecord='false'
      :showWarning='true'
    />
    <!-- 选择客户 -->
    <select-user-draw
      v-if="showclient"
      :visable.sync="showclient"
      width="860px"
      :showRight="false"
    />
    <!-- 选择客户群 -->
    <select-client-group-drawer
      v-if="showclientgroup"
      :visable.sync="showclientgroup"
      width="860px"
      :showRight="false"
    />

    <info-ls-black v-if="showinfo" :visableIf.sync="showinfo" />
  </div>
</template>

<script>
import MaterialContent from "@/components/MaterialContent";
import ConditionsForm from "@/components/UserGroupComp/components/ConditionsForm.vue";
import GroupForm2 from "@/components/UserGroupComp/components/GroupForm2.vue";
import SelectUserDraw from "@/components/UserGroupComp/SelectUserDraw.vue";
import SelectClientGroupDrawer from "@/components/UserGroupComp/SelectClientGroupDrawer";
import InfoLsBlack from "./InfoLsBlack.vue";
import SelectWechat from "@/components/UserGroupComp/SelectWechat.vue";

export default {
  components: {
    ConditionsForm,
    MaterialContent,
    GroupForm2,
    SelectUserDraw,
    SelectClientGroupDrawer,
    InfoLsBlack,
    SelectWechat,
  },
  data() {
    return {
      isSingle: false, //单号模式
      form: {
        type: 2,
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
      conditionList: [{ id: 1 }],
      companyList: [],
      showclient: false,
      showclientgroup: false,
      showinfo: false,
      showEwechat: false,
    };
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  created() {
    let routerName = this.$route.name;
    if (routerName == "SinglegBatchGroupAdd") {
      this.isSingle = true;
    }
  },
  methods: {
    handleCloseDialog() {
      this.$emit("update:visableIf", false);
      this.$emit("handleQuery");
    },

    goBack() {
      this.$router.back();
    },

    goPage(name) {
      this.$router.push({ name });
    },

    handleClient() {
      this.showclient = true;
    },

    handleClientGroup() {
      this.showclientgroup = true;
    },

    handleShow() {
      this.showinfo = true;
    },

    handleOpenEwechat() {
      this.showEwechat = true;
    },

    handlePlus() {
      this.conditionList.push({ id: this.conditionList.length + 1 });
    },
    handleMinus(index) {
      if (index == 0) {
        this.conditionList.splice(this.conditionList.length - 1, 1);
      } else {
        this.conditionList.splice(index, 1);
      }
    },

    handleBlurNumber(type, maxnumber) {
      // 使用正则表达式匹配正整数
      const regex = /^[1-9]\d*$/;
      // 如果输入的值不是正整数，则将其设置为上一个有效值
      if (!regex.test(this.form[type])) {
        this.form.min = maxnumber;
      } else {
        if (this.form[type] > 500) {
          this.form[type] = maxnumber;
        }
      }
    },

    handleSubmit() {
      this.goBack();
    },
  },
};
</script>
<style lang="scss" scoped>
.pagewarpperbody {
  overflow-y: auto;
  position: relative;
}
.addform {
  width: 1000px;
  margin: 0 auto;
  overflow-y: auto;
}
.addcard {
  border: 1px solid #e9e9e9;
}
.cardheader {
  min-height: 48px;
  border-bottom: 1px solid #e9e9e9;
  border-radius: 4px 4px 0 0;
  padding: 12px 20px;
}
.carditem {
  padding: 12px 0 12px 48px;
}
.fc_header {
  height: 46px;
  background: #f5f6f7;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
  .el-radio-group {
    padding: 7px 16px;
    border-radius: 16px;
    background-color: #fff;
    border: 1px solid #e9e9e9;
  }
}
.fc_body {
  border: 1px solid #e9e9e9;
  border-top: none;
}
.c_border {
  border: 1px solid #f0f0f0;
  border-radius: 4px 4px 0 0;
}
.exclude {
  border-top: 1px solid #e9e9e9;
  padding: 10px 0;
}
.form-footer {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 56px;
  line-height: 56px;
  border-top: 1px solid #e9e9e9;
  text-align: center;
}
.userimg {
  width: 32px;
  height: 32px;
  background-color: #ccc;
  overflow: hidden;
  border-radius: 2px;
}
</style>